<!-- 渠道统计 -->
<template>
  <div class="channel_statistics_page">
    <div class="flex flex-horizontal-between">
      <p class="title">渠道统计</p>
      <div class="flex flex-vertical-center">
        <p class="hand view-more" @click="viewMore()" style="margin-left:20px;">
          查看更多<span style="margin-left:5px;">></span></p>
      </div>
    </div>
    <dt-grid ref="table" :columns="columns" :onFetch='onFetch' :height='288' :border=false />
    <Modal v-model="moreFlag" title="渠道统计" :width='60'>
      <div class="flex flex-horizontal-between tab-top">
        <div class="choose-tab flex flex-horizontal-between">
          <div class="flex flex-vertical-center flex-horizontal-between"
            style="padding:0 20px;min-width:300px">
            <span class="text-center hand" :class="checkIndex === index ? 'selected' : ''"
              v-for="(item, index) in topData" :key="index"
              @click="topChooseClick(item,index)">{{ item }}</span>
          </div>
          <div class="flex flex-vertical-center">
            <span class="check-time"> 自定义：</span>
            <DatePicker type="daterange" :clearable="false" @on-change="dataChoose"
              ref="oselect" :options="options" placeholder="请选择时间" style="flex:1;width:240px">
            </DatePicker>
          </div>
        </div>
        <!--顾问积分信息-->
        <div class="flex flex-vertical-center integral-content">
          <Button type="primary" style="margin-left: 10px" @click="exportExcel">导出</Button>
        </div>
      </div>
      <dt-grid ref="tableModal" :columns="columns" :page='pageData' :onFetch='onFetch'
        :height='500' :showPageTotal='false' />
    </Modal>
  </div>
</template>
<script>
  import columns from './channelColumns'
  import homeMgr from '@/biz/buildingHome/home'
  export default {
    data() {
      return {
        columns: [],
        moreFlag: false,
        checkIndex: 1,
        topData: ['昨日', '今日', '本周', '本月', '本年'],
        options: {
          disabledDate(date) {
            return (
              date &&
              date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
            )
          },
        },
        chooseTime: {},
        pageData: {
          page: 1,
          rows: 10
        }
      }
    },
    methods: {
      init(data) {
        this.columns = columns.headers(this)
        this.chooseTime = data
        this.$refs.table.fetch(true)
      },
      onFetch(data) {
        let page = {
          current: 1,
          page: 1,
          rows: 10,
          ...data
        }
        let params = {
          ...page,
          buildingId: this.$dt.buildInfo().housesId,
          endTime: this.chooseTime.endTime,
          startTime: this.chooseTime.startTime
        }
        return homeMgr.channelStatistics(params).then(res => {
          if (this.moreFlag) {
            res.total = res.pages
            console.log(res)
            return res
          } else {
            let arr = []
            if (res.list.length > 5) {
              arr = res.list.splice(0, 5)
            } else {
              arr = res.list.splice(0, res.list.length)
            }
            return arr
          }
        })
      },
      viewMore() {
        this.moreFlag = true
        this.chooseTime = homeMgr.resovleTime(1)
        this.$refs.tableModal.init(this)
        this.$refs.tableModal.fetch()
      },
      // 切换日期
      topChooseClick(item, index) {
        this.checkIndex = index
        this.dataText = item
        this.$refs.oselect.handleClear() // 清空自定义时间
        this.chooseTime = homeMgr.resovleTime(index)
        this.$refs.tableModal.fetch(true)
      },
      dataChoose(val) {
        if (val[0] == '' || val[1] == '') {
          return false
        }
        val = this.$dt.tool.handleDateRange(val)
        this.dataText = '累计'
        this.checkIndex = 999
        this.chooseTime = {
          startTime: val[0],
          endTime: val[1],
        }
        this.$refs.tableModal.fetch(true)
      },
      exportExcel() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          endTime: this.chooseTime.endTime,
          startTime: this.chooseTime.startTime
        }
        homeMgr.channelStatisticsExport(params)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .channel_statistics_page {
    background-color: #fff;
    padding: 20px 15px;
    width: 49.5%;
    border-radius: 5px;

    .title {
      padding-left: 8px;
      color: #222;
      font-size: 18px;
      border-left: 2px solid #2298ff;
      font-weight: bolder;
    }

    .view-more {
      font-size: 12px;
      color: #2298ff;
    }


  }

  .tab-top {
    background-color: #fff;
    z-index: 10;
    border-bottom: 1px solid #ccc;

    .choose-tab {
      max-width: 65%;

      span {
        padding: 0 5%;
        color: #666;
        height: 50px;
        line-height: 50px;
        word-break: keep-all;
        display: inline-block;
      }

      .selected {
        border-bottom: 3px solid #0088ff;
        color: #0088ff;
        font-weight: 600;
      }

      .check-time {
        word-break: keep-all;
        max-width: 85px;
      }

      .date_picker {
        flex: 1;
      }
    }

    .integral-content {
      margin-right: 20px;

      .integral-title {
        font-size: 14px;
      }

      .statistics-time {
        margin-left: 10px;
      }
    }
  }
</style>